<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<title>API</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="../css/base.css">
		<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css">
		<script type="text/javascript" src="../framework/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../js/base.js"></script>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
		<script type="text/javascript" src="../layui/layui.js"></script>
		<script src="../framework/cframe.js"></script>
		<!-- 仅供所有子页面使用 -->
		<!-- 公共样式 结束 -->

		<style>
			textarea{
				width: 100%;
				height: auto;
				max-height: 200px;
				text-align: left;
				margin: 10px 0;
				padding: 10px;
				border-radius: 5px;
				border: 1px solid #CCC;
				color: #555;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
		</style>

	</head>

	<body>
		<div class="cBody">

			<div class="layui-collapse">
				<!--模块 开始-->
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">tips提示功能</h2>
					<div class="layui-colla-content">
						<button class="layui-btn" onmouseenter="getTips(this, '我是tips提示内容')" onmouseleave="layer.closeAll('tips')">tips提示功能</button>
						<textarea><button class="layui-btn" onmouseenter="getTips(this, '我是tips提示内容')" onmouseleave="layer.closeAll('tips')">tips提示功能</button></textarea>
						<div>
							<b>使用方法：</b><br />
							加入onmouseenter和onmouseleave事件函数即可。<br />
							onmouseenter事件获取tip，调用方法 getTips(this, '我是tips提示内容')<br />
							onmouseleave鼠标离开后tip消失 layer.closeAll('tips')
						</div>
					</div>
				</div>
				<!--模块 结束-->
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">按钮模块</h2>
					<div class="layui-colla-content">
						<button type="button" class="layui-btn  layui-btn-lg layui-btn-warm">大型按钮</button>
						<button type="button" class="layui-btn  layui-btn-warm">默认按钮</button>
						<button type="button" class="layui-btn  layui-btn-sm layui-btn-warm">小型按钮</button>
						<button type="button" class="layui-btn  layui-btn-xs layui-btn-warm">迷你按钮</button>
						<textarea style="height: 120px;">
							暖色组：
							<button type="button" class="layui-btn  layui-btn-lg layui-btn-warm">大型按钮</button>
							<button type="button" class="layui-btn  layui-btn-warm">默认按钮</button>
							<button type="button" class="layui-btn  layui-btn-sm layui-btn-warm">小型按钮</button>
							<button type="button" class="layui-btn  layui-btn-xs layui-btn-warm">迷你按钮</button>
						</textarea>
						<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
						<button type="button" class="layui-btn ">默认按钮</button>
						<button type="button" class="layui-btn layui-btn-sm ">小型按钮</button>
						<button type="button" class="layui-btn  layui-btn-xs ">迷你按钮</button>
						<textarea style="height: 120px;">
							默认组：
							<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
							<button type="button" class="layui-btn ">默认按钮</button>
							<button type="button" class="layui-btn layui-btn-sm ">小型按钮</button>
							<button type="button" class="layui-btn  layui-btn-xs ">迷你按钮</button>
						</textarea>
						<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
						<button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
						<button type="button" class="layui-btn  layui-btn-xs layui-btn-normal">迷你按钮</button>
						<textarea style="height: 120px;">
							百搭组：
							<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
							<button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
							<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
							<button type="button" class="layui-btn  layui-btn-xs layui-btn-normal">迷你按钮</button>
						</textarea>
						<button type="button" class="layui-btn layui-btn-lg layui-btn-danger">大型按钮</button>
						<button type="button" class="layui-btn layui-btn-danger">默认按钮</button>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">小型按钮</button>
						<button type="button" class="layui-btn  layui-btn-xs layui-btn-danger">迷你按钮</button>
						<textarea style="height: 120px;">
							警告组：
							<button type="button" class="layui-btn layui-btn-lg layui-btn-danger">大型按钮</button>
							<button type="button" class="layui-btn layui-btn-danger">默认按钮</button>
							<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">小型按钮</button>
							<button type="button" class="layui-btn  layui-btn-xs layui-btn-danger">迷你按钮</button>
						</textarea>
						<div>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>

							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>

							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
						</div>
						<textarea style="height: 300px;">
							灵活图标：
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
							
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
							
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
						</textarea>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">弹出层演示</h2>
						<div class="layui-colla-content">
							<button onclick="a1()" type="button" class="layui-btn layui-btn-normal">弹窗风格1</button>
							<button onclick="a2()" type="button" class="layui-btn layui-btn-normal">弹窗风格2</button>
							<button onclick="a3()" type="button" class="layui-btn layui-btn-normal">弹窗风格3</button>
							<button onclick="a4()" type="button" class="layui-btn layui-btn-normal">弹窗风格4</button>
							<button onclick="a5()" type="button" class="layui-btn layui-btn-normal">弹窗风格5</button>
							<button onclick="a6()" type="button" class="layui-btn layui-btn-normal">弹窗风格6</button>
							<button onclick="a7()" type="button" class="layui-btn layui-btn-normal">弹窗风格7</button>
							<button onclick="a8()" type="button" class="layui-btn layui-btn-normal">弹窗风格8</button>
							<textarea style="height: 140px;">
								layer.msg("弹窗内容", {icon: 在此输入数字选择风格 例如：1},function(){
									“在此输入弹窗完成后需要执行的代码，若不需执行则不填即可”
								}); 
								layer.msg("弹窗内容",function(){
									“这是第八个弹窗，即取消弹窗样式”
								}); 
							</textarea>
						</div>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">父子页面</h2>
						<div class="layui-colla-content">
							<button onclick="b1()" type="button" class="layui-btn layui-btn-normal">父子页面</button>
							<textarea style="height: 600px;">
								父页面需要填写的内容：
								var b1s = null; //定义一个变量来打开页面 这个变量名是唯一的 不能与方法名或是其他的函数名重复
								function b1(a1,a2,a3) { //在函数里可传递单个或多个参数
									layui.use('layer', function() {
										var layer = layui.layer;
										//iframe层-父子操作
										b1s = layer.open({
											title: "父子页面标题",
											type: 2,
											area: ['70%', '60%'], //设置打开子页面的宽度与高度
											scrollbar: true, //默认：true,默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
											maxmin: true,
											content: 'pagefile/checkin/check01.html', //指定跳转子页面地址
											success: function(layero, index) {
												var iframe = window['layui-layer-iframe' + index];
												iframe.child(a1,a2,a3) //传递参数
											}
										});
									});
								}
								子页面需要填写的内容：
								function child(a1,a2,a3){
									console.log(a1,a2,a3);//获取父界面的传值
									//该方法相当于入口函数，进入该子页面即执行
									}
							</textarea>
						</div>
					</div>
					<!--模块 开始-->
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">JS获取当前日期</h2>
						<div class="layui-colla-content">
							<p id="test2"></p>
							<script>
								$(function() {
									//时间计时器
									setInterval(function() {
										$("#test2").html(getDate());
									}, 500);
								})
							</script>
							<textarea style="height: 140px;">
<p id="test2"></p>
$(function(){
	//时间计时器
	setInterval(function(){
	    $("#test2").html(getDate());
	},500);
})
						</textarea>
							<div>
								<b>使用方法：</b><br />
								getDate()方法返回值为：y+"/"+mo+"/"+d+"&nbsp;&nbsp;"+h+":"+m+":"+s。<br />
								如上的一个拼接字符串
							</div>
						</div>
					</div>
					<!--模块 结束-->
				</div>



				<script>
					//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
					layui.use('element', function() {
						var element = layui.element;
					});
				</script>

			</div>
	</body>
	<script>
		function a1() {
			layer.msg("我是1号风格弹窗", {
				icon: 1
			}, function() {});
		}

		function a2() {
			layer.msg("我是2号风格弹窗", {
				icon: 2
			}, function() {});
		}

		function a3() {
			layer.msg("我是3号风格弹窗", {
				icon: 3
			}, function() {});
		}

		function a4() {
			layer.msg("我是4号风格弹窗", {
				icon: 4
			}, function() {});
		}

		function a5() {
			layer.msg("我是5号风格弹窗", {
				icon: 5
			}, function() {});
		}

		function a6() {
			layer.msg("我是6号风格弹窗", {
				icon: 6
			}, function() {});
		}

		function a7() {
			layer.msg("我是7号风格弹窗", {
				icon: 7
			}, function() {});
		}

		function a8() {
			layer.msg('我是8号风格弹窗', function() {});
		}
		var b1s = null;

		function b1() {
			layui.use('layer', function() {
				var layer = layui.layer;
				//iframe层-父子操作
				b1s = layer.open({
					title: "父子页面标题",
					type: 2,
					area: ['70%', '60%'],
					scrollbar: true, //默认：true,默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
					maxmin: true,
					content: '',
					success: function(layero, index) {
						var iframe = window['layui-layer-iframe' + index];
						iframe.child()
					}
				});
			});
		}
	</script>
</html>
